<template>
	<view>
		<Navbar></Navbar>
		<view class="u-m-20">
			<view class="u-flex u-col-top u-m-t-30 u-back-white u-p-20 u-radius-20" v-for="item in costsList" :key="item.id" @click="goCostsDetail(item.id)">
				<view class="u-m-r-20" v-if="item.tpic">
					<u-image width="200rpx" height="140rpx" border-radius="10" :src="item.tpic"></u-image>
				</view>
				<view class="u-flex-1">
					<view class="u-font-30 u-font-bold u-text-line-15">{{item.title}}</view>
					<view class="u-flex u-color-gray u-m-t-10">
						<view>有效期</view>
						<view class="u-font-26 u-m-l-10">{{item.create_time}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<Loadmore :status="status"></Loadmore>
		<view style="height: 200rpx;"></view>
		<Bottom :isReturn="true"></Bottom>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import Loadmore from '@/components/Loadmore.vue'
	import reachBottom from '@/mixins/reachBottom.js'
	import { teaCostsNesList } from '@/network/tea.js'
	export default {
		mixins: [reachBottom],
		components:{
			Navbar,
			Bottom,
			Loadmore
		},
		data(){
			return{
				costsList: [],
				type: 0
			}
		},
		onLoad(options){
			this.type = options.type
			this.onGetCostsList()
		},
		methods:{
			async onGetCostsList(){
				const params = {
					type_id: this.type,
					page: this.page,
					limit: this.pageSize
				}
				const res = await teaCostsNesList(params)
				this.count = res.data.count
				res.data.list.map(item=>this.costsList.push(item))
				if(this.costsList.length == this.count){
					this.status = 'nomore'
				}
			},
			goCostsDetail(id){
				uni.navigateTo({
					url: "/teaBureau/teaCostsDetail/teaCostsDetail?id=" + id
				})
			},
			loadData(){
				if(this.status == 'nomore')return
				this.page++
				this.status = 'loading'
				this.onGetCostsList()
			}
		}
	}
</script>

<style>
</style>